<template>
  <div class="order">
      <tab>
        <tab-item @on-item-click="tabs" :key="index" v-for="(item,index) in tabList" class="tab-item" :selected="index==selected">{{item.text}}
          <badge class="badge" v-if="item.num>0" :text="item.num"/></tab-item>
      </tab>
      <div class="scroller">
        <scroller>
            <div class="order-list">
              <order-item @del="del" :key="index" :index="index" v-for="(i,index) in orderList" :item="i"></order-item>
            </div>
        </scroller>
      </div>
  </div>
</template>
<script>
import { Tab, TabItem, Badge } from "vux";
import OrderItem from "@/components/OrderItem";
export default {
  name: "order",
  data() {
    return {
      selected: 0,
      tabList: [
        { text: "待处理", num: 0 },
        { text: "待出货", num: 0 },
        { text: "已完成", num: 0 },
        { text: "历史", num: 0 }
      ],
      orderList: [],
      order_status:0
    };
  },
  components: {
    Tab,
    TabItem,
    Badge,
    OrderItem
  },
  methods: {
    getOrder(order_status) {
      this.$http
        .get("/api/supplier.orders/index", {
          params: {
            order_status
          }
        })
        .then(res => {
          this.orderList = res.data.data.list;
        });
    },
    tabs(index) {
      if (index == 0) this.order_status = 0;
      if (index == 1) this.order_status = 40;
      if (index == 2) this.order_status = 100;
      this.getOrder(this.order_status);
    },
    getNum(order_status) {
      return this.$http.get("/api/supplier.orders/get_order_status_num", {
        params: {
          order_status: order_status
        }
      });
    },
    del(index){
      this.$delete(this.orderList,index)
    }
  },
  activated() {
    var that = this;
    this.getOrder(this.order_status);
    this.getNum(0).then(function(res) {
      that.tabList[0].num = res.data.data.num;
    });
    this.getNum(40).then(function(res) {
      that.tabList[1].num = res.data.data.num;
    });
  },
  updated() {
    var num = 0;
    this.tabList.forEach(function(v) {
      num += v.num;
    });
    this.$store.commit("changeNum", num);
  }
};
</script>
<style scoped>
.tab-item {
  position: relative;
}
.scroller{
  position: fixed;
  top: 44px;
  bottom:53px;
  width: 100%;
}
.badge {
  position: absolute;
  right: 2px;
  top: 3px;
}
.order-list{
  padding-bottom: 10px;
}
</style>

